<template>
  <div
    v-loading="loading"
    element-loading-background="rgba(0, 0, 0, 0)"
    style="height: 100%"
  >
    <header></header>
    <main>
      <el-form :model="formData" :rules="formDataRules" ref="formData">
        <div class="title">欢迎登录</div>
        <el-form-item label="" prop="account" class="margin-top" id="account">
          <el-input
            class="border-bottom"
            prefix-icon="iconfont icongerenxinxi"
            v-model="formData.account"
            placeholder="请输入手机号码"
          ></el-input>
        </el-form-item>
        <el-form-item
          v-if="passwordVisible"
          label=""
          prop="password"
          class="margin-top"
          id="pwd1"
        >
          <el-input
            class="border-bottom"
            prefix-icon="iconfont iconxiugaimima-01"
            v-model="formData.password"
            type="password"
            placeholder="请输入密码"
          >
            <i
              slot="suffix"
              class="iconfont iconmimabukejian"
              style="cursor: pointer"
              @click="changePasswordVisible()"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item
          v-else
          label=""
          prop="password"
          class="margin-top"
          id="pwd2"
        >
          <el-input
            class="border-bottom"
            prefix-icon="iconfont iconxiugaimima-01"
            v-model="formData.password"
            type="text"
            placeholder="请输入密码"
          >
            <i
              slot="suffix"
              class="iconfont iconkejian"
              style="cursor: pointer"
              @click="changePasswordVisible()"
            ></i>
          </el-input>
        </el-form-item>
        <el-form-item style="margin-top: 40px;">
          <el-button
            type="primary"
            class="form-control"
            @click="submitForm('formData')"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </main>
    <footer>Copyright ©2021长沙长泰智能装备云平台版权所有</footer>
  </div>
</template>

<script>
import { toLogin, loginSuccess } from "../api/login";
import md5 from "md5";
export default {
  name: "NotIE",
  data() {
    return {
      loading: false,
      errorTimes: {},
      passwordVisible: true,
      formData: {
        account: "",
        password: "",
        autoLogin: false,
        language: "zh",
      },
      formDataRules: {
        account: [
          {
            required: true,
            message: "手机号不能为空",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {},
  methods: {
    changePasswordVisible() {
      this.passwordVisible = !this.passwordVisible;
    },
    submitForm(formName) {
      let _this = this;
      let loginError = document.querySelector(".login_error");
      if (loginError) {
        loginError.remove();
      }

      _this.$refs[formName].validate((valid) => {
        if (valid) {
          let key = _this.formData.account;
          if (!_this.errorTimes[key]) {
            _this.errorTimes[key] = 0;
          }
          let lockTime = localStorage.getItem(key);
          let nowTime = new Date().getTime();
          let standard = 1000 * 60 * 10;
          if (lockTime && nowTime - lockTime < standard) {
            let differences = Math.floor(
              (standard - (nowTime - lockTime)) / 1000
            );
            let minutes = Math.floor(differences / 60);
            let seconds = differences - minutes * 60;
            let text =
              minutes > 0 ? minutes + "分钟" + seconds + "秒" : seconds + "秒";
            _this.$message.warning(
              "您的账号已被锁定，请在" +
                text +
                "后再次尝试，或联系管理员找回密码"
            );
          } else {
            _this.actionLogin(_this.formData);
          }
        } else {
          return false;
        }
      });
    },
    actionLogin(formData) {
      let params = Object.assign({}, formData);
      if (params.password.length != 32) {
        params.password = md5(params.password);
      }
      this.loading = true;
      toLogin(params).then((res) => {
        this.loading = false;
        if (res.status === 200) {
          this.$message.success(this.errorCode[this.$i18n.locale][res.message]);
          loginSuccess(res.data);
        } else {
          let account = document.getElementById("account");
          let pwd =
            document.getElementById("pwd1") || document.getElementById("pwd2");
          let errorDiv = document.createElement("div");
          errorDiv.className = "el-form-item__error login_error";
          errorDiv.textContent = this.errorCode[this.$i18n.locale][res.message];
          let errorCode = res.message;
          if (errorCode === "21010" || errorCode === "21036") {
            account
              .querySelector(".el-form-item__content")
              .appendChild(errorDiv);
          } else if (errorCode === "21011") {
            let key = this.formData.account;
            this.errorTimes[key]++;
            console.info(this.errorTimes);
            if (this.errorTimes[key] > 5) {
              errorDiv.textContent =
                "您的账号已被锁定，请10分钟后再次尝试，或联系管理员找回密码";
              localStorage.setItem(key, new Date().getTime());
            } else if (this.errorTimes[key] > 2) {
              let times = 6 - this.errorTimes[key];
              errorDiv.textContent = `您还有${times}次机会，超过后账号将会被锁定`;
            } else {
              errorDiv.textContent = "密码错误，请重新输入";
            }
            pwd.querySelector(".el-form-item__content").appendChild(errorDiv);
          }
        }
      });
    },
  },
  created() {},
};
</script>

<style scoped>
header {
  height: 203px;
  background-image: url("../assets/img/title.png");
  background-repeat: no-repeat;
  background-position: center 105px;
}
main {
  margin: 68px auto 50px;
  width: 455px;
  height: 430px;
  background: #f5f6f7;
  box-shadow: 5px 0px 25px 0px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  border-radius: 30px;
  padding: 50px 40px 40px;
}
main .title {
  height: 35px;
  line-height: 35px;
  font-size: 35px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #146ede;
}
footer {
  text-align: center;
  height: 14px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
}
main ::v-deep input.el-input__inner {
  padding-left: 77px !important;
}
</style>
